<html>    
  <head> 
    <script type="text/javascript" src="../jquery/jquery-1.4.4.min.js"></script>        
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script type="text/javascript" src="../gmap3-2.0-min.js"></script> 
    <style>
      .gmap3{
        margin: 20px auto;
        border: 1px dashed #C0C0C0;
        width: 500px;
        height: 250px;
      }
    </style>
    
    <script type="text/javascript">
      
      var markers=[];
      var overlay=[];
      
      function getBounds($e, bounds){
        if (!bounds) return;
      	var southWest = bounds.getSouthWest();
      	var northEast = bounds.getNorthEast();
      	var lngSpan = northEast.lng() - southWest.lng();
      	var latSpan = northEast.lat() - southWest.lat();
      	for (var i = 0; i < 10; i++) {
          $e.gmap3({
            action : ':addMarker',
            lat: southWest.lat() + latSpan * Math.random(),
            lng: southWest.lng() + lngSpan * Math.random(),
            callback: function($e, marker){
              var i = markers.length
              markers[i] = marker;
              var $button = $('<span id="button-'+i+'"> ['+i+'] </span>');
              $button
                .click(function(){
                    var i = $(this).attr('id').substr(7);    
                    $e.gmap3({
                      action:'panTo', 
                      args:[
                        markers[i].position
                      ]
                    });
                })
                .css('cursor','pointer');
                
              $('#panTo').append($button);
              $e.gmap3({
                action:':addOverlay',
                content: '<div style="border:1px solid #FF0000; background-color: #00FF00; width:50px; height: 20px; text-align:center">'+i+'</div>',
                latLng: marker.getPosition(),
                offset:{
                  y:-32,
                  x:12
                }
              });
            }
          });
        }
      }
    
      $(function(){
      
        $('#test1').gmap3(
          { action: ':init',
            center:{
                lat:44.797916, 
                lng:-93.278046
            },
            onces: {
              bounds_changed: function($e){
                $e.gmap3({action:'getBounds', callback:getBounds});
              }
            }
          }
        );
        
      });
    </script>       
  </head>
    
  <body>
    <div id="panTo"></div>
    <div id="test1" class="gmap3"></div>
  </body>
</html>